import React, {Component} from 'react';
import {Switch, Route, NavLink,Redirect} from 'react-router-dom'

import ItemBox from './itemBox'
import Page_1 from "./page_1";
import Page_2 from "./page_2";

class dashboard extends Component {
    constructor(props) {
        super(props);
        this.num = 0;
    }

    componentWillReceiveProps() {
        this.setState({
            num:1
        })
    }

    render() {
        return (
            <div>
                <ItemBox/>
                <ul>
                    <li>
                        <NavLink activeClassName='active' to={`/page/fir/${parseInt(Math.random()*1e2)}`} >第1页</NavLink>
                    </li>
                    <li>
                        <NavLink activeClassName='active' to={`/page/sec/${this.num}`}>第2页</NavLink>
                    </li>
                    <li>
                        <a onClick={()=> this.props.history.push('/page/fir/1')}>手动第一页</a>
                    </li>
                </ul>
                {this.props.children}
                <Switch>
                    <Route exact path='/page/fir/:id' component={Page_1}/>
                    <Route path='/page/sec/:name' component={Page_2}/>
                    <Redirect path='/' to={{pathname:'/page/fir/0'}}/>
                </Switch>
            </div>
        )
    }
}

export default dashboard;